/* Screen Resolution Scope
 *	min width 1024px (-15 of scroll bar)
 *	max width 2048px (-15 of scroll bar)
*/
@CHARSET "UTF-8";

/* HTML Element */
html{
	height: 100%;
	width: 100%;
	overflow-y: scroll;
}
body{
	height: 100%;
	width: 1009px;
	width: 100%;
	background-color: #E0E0D1;
/* 	font-family: verdana, sans-serif; */
	font-family: "Comic Sans MS", cursive, sans-serif;
	font-size: 0.8em;
}
h1{
	color: #B8DB4D;
}
h2{
	color: #526033;
}
h3{
	color: #526033;
}

/* Layout */
#header{
	height: 80px;
	width: 100%;
	clear: both;
	background-image: url('../img/background-header-01.png');
/* 	border-bottom: 5px solid #A3C357; */
}
#header-bottom-border{
	width: 100%;
	clear: both;
	height:5px;
	background-image: url('../img/header-line.png');
	background-size: 100%;
}
/* #header-bottom-border .line{ */
/* 	width: 100%; */
/* 	height: 5px; */
/* } */
	#header_logo_wrapper{
		height: 55px;
		width: 300px;
		float: left;
		margin-top: 20px;
		margin-left: 30px;
	}
		#header_logo_wrapper img{
			height: 100%;
			width: 100%;
		}
	#header_search_wrapper{
		height: 30px;
		width: 400px;
		float: right;
		margin-top: 40px;
		margin-right: 10px;
	}
		#header_search_wrapper form{
			height: 100%;
		}
		
#page{
	height: auto;
	width: 100%;
	overflow: hidden;
	margin: auto;
	background-color: #181818;
}
#column_right{
	float: right;
	width: 260px;
}
	#menu{
		height: 100%;
		width: 100%;
		overflow: hidden;
		/*background-image: url('../img/background-right-side.png');*/
	}
		#menu_group_wrapper{
			height: 100%;
			width: 95%;
			overflow: hidden;
			margin: auto;
		}
		.menu-item-wrapper{
			height: 80px;
			width: 33.33%;
			float: left;
			position:relative;
		}
		.menu-item-wrapper:hover{
			background-color: #3C3B3C;
		}
			.menu-item-wrapper a{
				width: 100%;
				height:100%;
				display: block;
				overflow: hidden;
			}
				.menu-item-wrapper a img{
					height: 60%;
					width: 60%;
					position: absolute;
				    top: 0;
				    left: 0;
				    right: 0;
				    bottom: 0;
				    margin: auto;
				}
#column_left{
/* 	margin-right: 260px; */
	background-color: #E7EAEC;
}
	#profile{
		height: 450px;
		width: 230px;
		float: left;
		margin-top: 80px;
		background-color: #C4D0C9;
	}
		#profile_picture{
			height: 230px;
			width: 100%;
		}
			#profile_picture img{
				height: 100%;
				width: 100%;
			}
		#profile_title{
			height: 50px;
			width: 100%;
			background-color: #B6C2BA;
		}
			#profile_nickname{
				height: 40px;
				width: 161px;
				float: left;
				padding-top: 10px;
				padding-left: 10px;
				font-size: 2em;
				font-weight: bold;
/* 				color: #B6C2BA; */
			}
			#profile_title_generation{
				height: 45px;
				width: 59px;
				float: left;
				background-color: #A3ADA7;
				padding-top: 5px;
				text-align: center;
			}
				#profile_title_generation p{
					font-weight: bold;
					color: #526033;
				}
		#profile_detial{
			height: 160px;
			position:relative;
			padding-top: 10px;
			padding-right: 10px;
			text-align: right;
		}
			#profile_detial p{
				font-weight: bold;
				color: #526033;
			}
	#content{
		height: auto;
		width: auto;
		margin-left: 230px;
		padding-top: 5px;
		padding-bottom: 5px;
		padding-left: 5px;
		padding-right: 5px;
	}
		#page_title{
			height: 100%;
			width: 100%;
		}
		#content_page{
			min-height: 530px;
			height: auto;
			width: 100%;
/* 			background-color: #f5f3e5; */
/* 			border: 1px solid #dfd9c3; */
			margin-left: 20px;
		}
#footer{
	height: 60px;
	width: 100%;
	clear: both;
	background-image: url('../img/background-footer-01.png');
	border-top: 5px solid #A3C357;
}
	#footer_icon_wrapper{
		height: 100%;
		width: 600px;
		float: right;
/* 		padding: 3px 0; */
		text-align: right;
	}
		#footer_icon_wrapper img{
/* 			height: 100%; */
/* 			width: 19%; */
			margin: 3px 10px;
		}

/* JQuery UI */
.ui-datepicker-trigger{
	vertical-align: middle;
	cursor: pointer;
}
.ui-button-text-only .ui-button-text{
	padding: .15em 1em;
}
.txt-search{
	width: 88%;
	border: 0px;
	height: 30px;
	font-size: 1.5em;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	padding: 0 15px 0 15px;
}
ul.main-menu{
	margin-top: 75px;
	width: 1050px;
}
ul.main-menu li{
	display:block;
	list-style-type: none;
	float:left;
	width: 150px;
	height: 150px;
/* 	background-color: #EEE; */
/* 	border: 1px solid white; */
}
ul.main-menu a{
	color:black;
}
ul.main-menu li.active{
	cursor: pointer;
}
ul.main-menu li.active div.caption{
	text-align: center;
	padding-top: 125px;
	font-size: 1.2em;
	font-weight: bold;
}

ul.main-menu li#menu-personal-info{
/* 	background-color: #00D1A0; */
	background: #00D1A0 url("../img/menu_personalinfo.png") no-repeat center 18px;
}ul.main-menu li#menu-personal-info.hover{background-color: #CCC;}

ul.main-menu li#menu-project{
	background: #2BAD99 url("../img/menu_project.png") no-repeat center 19px;
}ul.main-menu li#menu-project.hover{background-color: #CCC;}

ul.main-menu li#menu-resources{
	background: #FF7051 url("../img/menu_resources.png") no-repeat center 14px;
}ul.main-menu li#menu-resources.hover{background-color: #CCC;}

ul.main-menu li#menu-customize{
	background: #D282A9 url("../img/menu_customize.png") no-repeat center 18px;
}ul.main-menu li#menu-customize.hover{background-color: #CCC;}

ul.main-menu li#menu-export{
	background: #F4A278 url("../img/menu_export.png") no-repeat center 18px;
}ul.main-menu li#menu-export.hover{background-color: #CCC;}

ul.main-menu li#menu-mentor{
	background: #74AF5B url("../img/menu_mentor.png") no-repeat center 18px;
}ul.main-menu li#menu-mentor.hover{background-color: #CCC;}

ul.main-menu li#menu-otherjstp{
	background: #A3C30E url("../img/menu_otherjstp.png") no-repeat center 18px;
}ul.main-menu li#menu-otherjstp.hover{background-color: #CCC;}

ul.main-menu li#menu-achieve{
	background: #FF9ABC url("../img/menu_achieve.png") no-repeat center 18px;
}ul.main-menu li#menu-achieve.hover{background-color: #CCC;}

ul.main-menu li#menu-utility{
	background: #CCC;
}
ul.main-menu li#menu-activity{
	background: #555;
	width: 450px;
}

ul.main-menu li#menu-activity div.current-activity{
/* 	clear: both; */
/* 	float: left; */
	/* border: 1px solid black; */
	overflow: hidden;
	width: 355px;
	height: 120px;
	cursor: default;
	padding: 15px 0 15px 15px;
	color: white;
	line-height: 1.3em;
	font-size: 1.1em;
}

ul.main-menu li#menu-activity div.current-activity h2{
	color: #FFFFB0;
	margin: 0 0 10px 0;
}

ul.main-menu li#menu-activity div.showall-activity{
/* 	width: 80px; */
/* 	height: 150px; */
/* 	float: right; */
/* 	text-align: center; */
}


ul.util-menu{
	margin: 0px;
	width: 150px;
}
ul.util-menu li{
	display:block;
	list-style-type: none;
	float:left;
	width: 75px;
	height: 75px;
}
ul.util-menu li#util-menu-email{
	background: #797B7E url("../img/menu-email.png") no-repeat center 21px;
}ul.util-menu li#util-menu-email.hover{background-color: #CCC;}

ul.util-menu li#util-menu-calendar{
	background: #5C5E60 url("../img/menu-calendar.png") no-repeat center 12px;
}ul.util-menu li#util-menu-calendar.hover{background-color: #CCC;}

ul.util-menu li#util-menu-webboard{
	background: #5C5E60 url("../img/menu-webboard.png") no-repeat center 15px;
}ul.util-menu li#util-menu-webboard.hover{background-color: #CCC;}

ul.util-menu li#util-menu-faq{
	background: #797B7E url("../img/menu-faq.png") no-repeat center 11px;
}ul.util-menu li#util-menu-faq.hover{background-color: #CCC;}





















